<style scoped>
@import "../css/page6.css"; /* 引入预定义变量 */
.post-css-test {
  transform: rotateY(360deg);
  box-shadow: 0 0 3px 5px rgba(222, 222, 222, .3);
  display: flex;
  color: var(--color-main);
}
</style>

<template>
  <div class="height100">
    <div class="home-page-center single-page-center base">
      <div class="home-section-wrap page-center-wrap-bottom">
        <div class="home-section-env">
          <h1>包络绘制页面</h1>

          请选择包络绘制方法：<br>
          <el-cascader :options="options" :props="optionProps" v-model="a1" @change="handleChange"></el-cascader>

          <br>
          <br>

          参数1（默认值:10）
          <el-input placeholder="请设置参数值（默认为10）" v-model="n_neighbors" @change="inputevent()" class="input"></el-input>

          <br>

          参数2（默认值:0.1）
          <el-input placeholder="请设置参数值（默认为0.1）" v-model="contamination" class="input"></el-input>

          <br>

          <el-button @click="submit()">包络绘制</el-button>
          <el-button type="button" v-on:click="decision">决策</el-button>
          异常产品编号：{{ product_id }}
          <br>
          <img style="width:500px" :src="img" class="im">
          <br>
          <br>
        </div>
      </div>
    </div>
  </div>

</template>

<script>


//import ApiUser from 'src/api/ApiUser'


export default {

  data() {


    return {

      n_neighbors: 10,
      contamination: 0.1,
      value: '',
      a1: '',
      p1: '',
      p2: '',


      t: 'h',
      d: '1',
      method: '',
      p1: '',
      p2: '',

      myImage: '',
      img: '',
      img_draw1: '',
      img_draw2: '',
      product_id: '',

      options:
        [
          {
            value: 'LOF',
            label: '局部离群因子算法',
            disabled: false,
          },
          {
            value: 'OneClassSVM',
            label: '单分类向量机算法',
            disabled: false,
          },
        ]
    }
  },
  methods: {
    decision: function () {
      this.$axios.post('/api/decision', {})
        .then(res => {//alert(res.data)

          this.product_id = res.data

        })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });


    },


    submit0: function () {

      //传3个参数
      //alert(this.a1)
      if (this.a1 == '') {
        alert("请先选择包络绘制方法")
      } else {
        //把high或low,维度两个参数传给后端传过去参数

        alert(this.a1)
        this.$axios.post('/api/post_draw1', {
            a: this.a1,
            p1: this.n_neighbors,
            p2: this.contamination
          }
          // ,{headers:{'Content-Type':'application/x-www-form-urlencoded' }},{responseType:"arraybuffer"}
        )
          .then(res => {
            this.img = 'data:;base64,' + res.data
          })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
        //穿过来图片
        // alert(this.value)
        // this.$axios.post('/api/post_hl_d', {
        //     }, {headers:{'Content-Type':'application/x-www-form-urlencoded' }},{responseType:"arraybuffer"})
        //    .then(res=>{
        //   this.img = 'data:;base64,' + res.data
        //     })
        //   .catch(function (error) {
        //   console.log(error);
        //    });
        //    alert(this.img)
        //alert("您已成功提交！"+"数据类型："+this.t+"，维度："+this.d)
      }

    },

    handleCommand(command) {
      //alert('post');
      //alert(command)
      // alert(imageUrl)

      this.a1 = command;

    },


    submit: function () {

      //传3个参数
      //alert(this.a1)
      if (this.a1 == '') {
        alert("请选择绘制方法")
      } else {

        this.p1 = this.n_neighbors
        this.p2 = this.contamination


        this.$axios.post('/api/post', {

          algorithm: this.a1,
          p1: this.p1,
          p2: this.p2,
        })
          .then(res => {
            this.img = 'data:;base64,' + res.data
          })
          .then(function (response) {
            console.log(response);
          })
          .catch(function (error) {
            console.log(error);
          });
       // alert("您已成功提交！" + "绘制方式：" + this.a1 + "，n_neighbors：" + this.p1 + "，contamination：" + this.p2)
      }
    },

    show: function () {

      //alert(this.a1)
      if (this.a1 == '') {
        alert("请选择绘制方法")
      } else {
        if (this.a1 == "LOF") {
          alert("LOF包络绘制中，请稍后...")
          this.$axios.post('/api/lof', {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}, {responseType: "arraybuffer"})
            .then(res => {
              this.img = 'data:;base64,' + res.data
            })
            .catch(function (error) {
              console.log(error);
            });

        }
        if (this.a1 == "OneClassSVM") {
          alert("OneClassSVM包络绘制中，请稍后...")
          this.$axios.post('/api/oneclass', {}, {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}, {responseType: "arraybuffer"})
            .then(res => {
              this.img = 'data:;base64,' + res.data
            })
            .catch(function (error) {
              console.log(error);
            });

        }

      }

    },


    myFunction: function () {

      //this.myImage = "https://www.tutorialsplane.com/wp-content/uploads/2018/02/27867786_1714460465242017_6847995972742989230_n.jpg";
      this.myImage = "./1.jpg";
      //alert(this.myImage)
    },


    inputevent() {
      console.log(this.n_neighbors)
    },

    Enveloping_drawing: function () {
      //ApiUser.list()

      //调用不同算法的python函数，并传过去对应的参数，


      //alert("post")
      this.p1 = this.n_neighbors
      this.p2 = this.contamination
      //alert(algotithm)
      this.$axios.post('/api/post', {
        algorithm: this.a1,
        p1: this.p1,
        p2: this.p2,

      })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });

    },

    go() {
      this.$router.push('page1')
    }
  }
}


</script>
